<template>
  <div>
      <my-menu activeIndex="/course"></my-menu>
      <div class="container clearfix">
        <div class="left-container">
          <div class="project-list">
            <el-row :gutter="20">
                <el-col :span="12" v-for="item in projectList" :key="item._id" style="margin-bottom:20px;">
                  <img :src="'https://api.yeshaojun.com'+ item.img" alt="" @click="gotoProject(item)">
                </el-col>
            </el-row>
          </div>
        </div>
        <div class="right-container">
            <my-type></my-type>
        </div>
      </div>
  </div>
</template>

<script>
import myMenu from '../components/menu'
import myType from '../components/type'
import mixinsList from '../mixins/index.js'
export default {
  mixins: [mixinsList],
  components: {
    myMenu,
    myType
  },
  methods: {
    gotoProject (obj) {
      // console.log('111')
      this.$router.push({
        name: 'courseDetail',
        params: {
          name: obj._id
        }
      })
    }
  },
  mounted () {
    this.getProject()
  }
}
</script>

<style lang="stylus" scoped>
  .container
    width: 1200px
    margin:20px auto;
    background-color rgb(244,244,244)
    .left-container
      height: auto
      width: 100%
      max-width: 800px
      display: inline-block
      float: left
      .project-list
        background-color #fff
        min-height 800px
        padding 40px
        img
          width 100%
          border-radius 5px
          box-shadow 0px 1px 2px 1px #ccc
          cursor pointer
    .right-container
      float: left
      width: 380px
      z-index: -1
      height: 100%
      padding-bottom: 100px
      padding-left: 20px
      overflow: hidden
</style>
